<template>
  <div class="1">
    <section class="wrap">
      <header class="Me_act_header">
        <p><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></p>
        <p>激活手机号码</p>
        <p></p>
      </header>
      <main>
        <p>为了正常评论、上传，请激活您的账号</p>
        <!-- <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field> -->
        <mt-field placeholder="请输入手机号" type="tel" class="Me_act_Inp_phone">
        </mt-field>
        <mt-field placeholder="输入手机验证码" class="Me_act_Inp_Code" >
          <!-- <img src="../../../static/img/tuijian_03.png" height="45px" width="100px"> -->
          <div class="Me_act_Code">获取验证码</div>
        </mt-field>
        <mt-button type="primary" size="large">确定</mt-button>
      </main>
      <footer></footer>
    </section>
  </div>
</template>
<script>
  import { Field } from 'mint-ui';
  export default {
    name: 'Me_active_phone',
    data() {
      return {
        font_awesome: [
        ],
      }
    }
  }
</script>
<style lang="less" scoped>
  .px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
  }
  .flexbox{
    display: flex;
  }
  .height(@ht){.px2rem(height,@ht)}
  .line-height(@arg){.px2rem(line-height, @arg);}
  .font-size(@arg){.px2rem(font-size, @arg);}
  .font(@fz,@color){
      .px2rem(font-size,@fz);
      color: @color;
  }
  .border-radius(@arg){.px2rem(border-radius, @arg);}
  .padding-top(@top){.px2rem(padding-top, @top);}
  .padding-right(@right){.px2rem(padding-right, @right);}
  .padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
  .padding-left(@left){.px2rem(padding-left, @left);}
  .margin-top(@top){.px2rem(margin-top, @top);}
  .margin-right(@right){.px2rem(margin-right, @right);}
  .margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
  .margin-left(@left){.px2rem(margin-left, @left);}
  html,body{
    width:100%;
    height:100%;
  }
  .wrap{
    width:100%;
    .height(1300);
    opacity: 0.8;
    background:url("../../../static/img/y_inNewImg.png") no-repeat;
    .Me_act_header{
      display:flex;
      justify-content:space-between;
      .font(40,#fff);
      .px2rem(line-height, 75);
      padding: 0% 5%;
      p{
        i{
          color:#000;
        }
      }
    }
    main{
      font-weight:900;
        p{
          .padding-top(50);
          text-align:center;
          .font(30,#fff);
          .margin-bottom(150);
        }
        .Me_act_Inp_phone{
          .height(100);
          background:#665f59;
        }
        .Me_act_Inp_Code{
            .height(100);
            background:#665f59;
            .margin-bottom(150);
            .Me_act_Code{
              background:transparent;
              .px2rem(width, 175);
              .font(30,#fff);
              .height(70);
              text-align:center;
              .px2rem(line-height, 70);
              background:#1f0f00;
          }
        }
        
      }
  }
  
</style>